<template>
  <div class="informationaggregationone">
    <el-container v-loading="loading">
      <el-container>
        <el-main>
          <el-select v-model="value" placeholder="请选择角色" @change="changeClick">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <!-- <el-select style="margin-left:20px;" v-model="valueone" placeholder="请选择状态" @change = "stateClick">
    <el-option
      v-for="item in optionsone"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
          </el-select>-->
          <el-button @click="butClick">搜索</el-button>
          <div class="but" style="float:right">
            <el-button type="primary" round>服务次数 {{serviceCount}}</el-button>
          </div>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column label="预约开始时间" prop="startTime" align="center"></el-table-column>
            <el-table-column label="预约结束时间" prop="endTime" align="center"></el-table-column>
            <el-table-column label="角色" prop="role" align="center"></el-table-column>
            <el-table-column label="姓名" prop="leaderName" align="center"></el-table-column>
            <el-table-column label="签到" align="center" prop="signInTime"></el-table-column>
            <el-table-column label="签退" prop="signOutTime" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">服务详情</el-button>
                <el-button size="mini" @click="handleDelete(scope.$index, scope.row)">获评详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-dialog title="详情" :visible.sync="dialogTableVisible">
            <el-table :data="gridData">
              <el-table-column property="userId" align="center" label="ID"></el-table-column>
              <el-table-column property="name" align="center" label="姓名"></el-table-column>
              <el-table-column property="oname" align="center" label="学校"></el-table-column>
              <el-table-column property="className" align="center" label="班级"></el-table-column>
              <el-table-column
                style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"
                v-if="Boole === true"
                align="center"
                label="评论内容"
              >
                <template slot-scope="scope">
                  <el-popover trigger="hover" placement="top">
                    <p style="width:300px;">{{ scope.row.comment.content }}</p>
                    <div slot="reference" class="name-wrapper">
                      <el-tag size="medium">内容</el-tag>
                    </div>
                  </el-popover>
                </template>
              </el-table-column>
            </el-table>
          </el-dialog>
          <div class="paging">
            <el-pagination
              background
              @current-change="handleCurrentChange"
              layout="prev, pager, next"
              :total="totalCount"
            ></el-pagination>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
//文件引入
import steamroller from "../../commonality";
import transitionTime from "../../transitionTime";
export default {
  data() {
    //自定义属性
    return {
      totalCount: 10,
      dialogTableVisible: false,
      loading: false,
      tableData: [],
      gridData: [],
      gridDataone: [],
      options: [
        {
          value: "teacher",
          label: "教师"
        },
        {
          value: "student",
          label: "学生"
        }
      ],
      optionsone: [
        {
          value: "unfinished",
          label: "未完成"
        },
        {
          value: "completed",
          label: "已完成"
        }
      ],
      value: "",
      valueone: "",
      Boole: false,
      serviceCount: "",
      reqParams: {
        baseId: JSON.parse(sessionStorage.getItem("user")).baseId,
        role: "",
        status: "completed",
        page_no: "1",
        per_page: "10"
      }
    };
  },
  //模块加载前执行
  created() {
    this.List();
  },
  methods: {
    //获取初始数据
    List() {
      this.loading = true;
      this.$api.Basemanager.message(this.reqParams)
        .then(res => {
          this.tableData = res.data.rows;
          this.tableDataone = res.data.rows;
          this.serviceCount = res.data.total;
          if (res.data.pageCount) {
            this.totalCount = res.data.pageCount * 10;
          } else {
            this.totalCount = 10;
          }
          //转换时间格式 //存储多个初始化数据，进行下拉筛选
          this.Timefunction(res.data.rows);
          this.loading = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    //时间转换
    Timefunction(res) {
      //转换时间格式 //存储多个初始化数据，进行下拉筛选
      let time;
      let timeone;
      let timethree;
      let timetwo;
      for (let i = 0; i < res.length; i++) {
        time = transitionTime(res[i].startTime);
        timeone = transitionTime(res[i].endTime);
        if (res[i].signInTime) {
          timetwo = transitionTime(res[i].signInTime);
        }
        if (res[i].signOutTime) {
          timethree = transitionTime(res[i].signOutTime);
        }
        this.tableData[i].startTime = time;
        this.tableData[i].signInTime = timetwo;
        this.tableData[i].signOutTime = timethree;
        this.tableData[i].endTime = timeone;
        if (this.tableData[i].role === "student") {
          this.tableData[i].role = "学生";
        } else {
          this.tableData[i].role = "教师";
        }
      }
    },
    //服务人数筛选
    handleEdit(index, row) {
      this.loading = true;
      this.Boole = false;
      this.gridData = [];
      this.$api.Basemanager.messageList(row.reservationId)
        .then(res => {
          if (res.code === 200) {
            if (row.role === "学生") {
              this.gridData.push(res.data.leader);
            } else if (row.role === "教师") {
              this.gridData = res.data.teamUsers;
            }
          }
          this.dialogTableVisible = true;
        })
        .catch(err => {
          console.log(err);
        });
      this.loading = false;
    },
    //获评人数筛选
    handleDelete(index, row) {
      this.loading = true;
      this.Boole = true;
      this.gridData = [];
      this.$api.Basemanager.messageList(row.reservationId)
        .then(res => {
          if (res.code === 200) {
            if (row.role === "教师") {
              for (let i = 0; i < res.data.teamUsers.length; i++) {
                if (res.data.teamUsers[i].comment) {
                  if (res.data.teamUsers[i].comment.status === "passed") {
                    this.gridData.push(res.data.teamUsers[i]);
                  }
                }
              }
            } else {
              console.log('123')
              if (res.data.leader.comment) {
                if (res.data.leader.comment.status === "passed") {
                  this.gridData.push(res.data.leader);
                }
              }
            }
            this.dialogTableVisible = true;
          }
        })
        .catch(err => {
          console.log(err);
        });
      this.loading = false;
    },
    //下拉列表筛选
    // stateClick(item){
    // this.reqParams.status = item
    // },
    changeClick(item) {
      this.reqParams.role = item;
    },
    // 搜索
    butClick() {
      this.loading = true;
      this.reqParams.page_no = 1;
      this.totalCount = 10;
      this.$api.Basemanager.message(this.reqParams)
        .then(res => {
          this.tableData = res.data.rows;
          this.Timefunction(res.data.rows);
          this.serviceCount = res.data.total;
          if (res.data.pageCount) {
            this.totalCount = res.data.pageCount * 10;
          } else {
            this.totalCount = 10;
          }
          this.loading = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    //分页器
    handleCurrentChange(val) {
      this.reqParams.page_no = val;
      this.$api.Basemanager.message(this.reqParams)
        .then(res => {
          this.tableData = res.data.rows;
          this.Timefunction(res.data.rows);
          this.serviceCount = res.data.total;
          if (res.data.pageCount) {
            this.totalCount = res.data.pageCount * 10;
          } else {
            this.totalCount = 10;
          }
          this.loading = false;
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
<style scoped>
.informationaggregationone .paging {
  float: right;
  padding: 15px 0;
}
</style>
